<template>
  <div style="overflow: hidden; width: 100%; height: 100%">
    <!--    <BasicTable @register="registerTable">-->
    <!--      <template #toolbar>-->
    <!--      </template>-->
    <!--    </BasicTable>-->
    <VxeBasicTable ref="tableRef" v-bind="gridOptions"> </VxeBasicTable>
    <FormModal @register="register" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { ref, onMounted, reactive } from 'vue';
  import { useRoute } from 'vue-router';
  import {
    purchaseOrderTableListApi,
    outsourceOrderTableListApi,
    mouldListApi,
  } from '@/api/sys/msUser';
  import {
    BasicTableProps,
    VxeBasicTable,
    VxeGridInstance,
    VxeGridListeners,
  } from '@/components/VxeTable';

  const route = useRoute();

  import FormModal from './FormModal.vue';
  import { columns, searchFormSchema } from './role.data';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useModal } from '@/components/Modal';
  import { vxeTableColumns, vxeTableFormSchema } from '@/views/msManage/mouldlList/list/role.data';

  defineOptions({ name: 'userNoteList' });
  const { createMessage } = useMessage();
  const loading = ref(false);

  const userName = ref(route.params?.userName);

  const [register, { openModal, closeModal }] = useModal();

  // const [registerTable, { reload }] = useTable({
  //   title: 'ms外协加工单查询列表',
  //   api: outsourceOrderTableListApi,
  //   columns,
  //   formConfig: {
  //     labelWidth: 120,
  //     schemas: searchFormSchema,
  //     autoSubmitOnEnter: true
  //   },
  //   useSearchForm: true,
  //   showTableSetting: true,
  //   bordered: true,
  //   showIndexColumn: false,
  // });

  const tableRef = ref<VxeGridInstance>();

  const gridOptions = reactive<BasicTableProps>({
    id: 'VxeTable',
    // keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    showOverflow: true,
    size: 'mini',
    height: 'auto',
    columns: columns,
    // toolbarConfig: {
    //   slots: {
    //     buttons: 'toolbar_buttons'
    //   }
    // },
    formConfig: {
      enabled: true,
      items: searchFormSchema,
    },
    pagerConfig: {
      pageSize: 20,
    },
    proxyConfig: {
      props: {
        result: 'data.list',
        list: 'data.list',
        total: 'data.totalResult',
        message: 'message',
      },
      ajax: {
        query: async ({ page, form, order }) => {
          return outsourceOrderTableListApi({
            page: page.currentPage,
            pageSize: page.pageSize,
            IfXuNiJian: 1,
            ...form,
            order,
          });
        },
        // queryAll: async ({ form }) => {
        //   return await demoListApi(form);
        // },
      },
    },
  });

  function handleCreate() {
    openModal(true, {
      isUpdate: false,
    });
  }

  function format(seconds) {
    //秒转化为分钟格式
    let s = Math.trunc(seconds);
    let minInt = Math.floor(s / 60);
    let min = minInt >= 10 ? minInt : '00' + minInt;
    s -= 60 * min;
    let sec = s >= 10 ? s : '00' + s;
    return min + ':' + sec;
  }

  function handleEdit(record: Recordable) {
    openModal(true, {
      record,
      isUpdate: true,
    });
  }
  function handleView(record: Recordable) {
    let url = record.mp3Url ? record.mp3Url : record.remoteUrl;
    // let url=record.remoteUrl;
    window.open(url);
  }

  function handleDelete(record: Recordable) {
    //console.log(record);

    deleteApi(record)
      .then((res) => {
        createMessage.success(res.message);
      })
      .catch((res) => {
        createMessage.error(res.message);
      })
      .finally(() => {
        reload();
      });
  }

  function handleSuccess() {
    reload();
  }
</script>
